<template>
	<view class="con pb10">
		<nodata v-if="isdata"></nodata>
		<view v-for="(item,index) in list" :key="index" class="mb50">
			<view @click="tapdetail(item)" class="flex-a-i">
				<view class="colorFD2F55 flex-ju-c  ra6 wh60-32 size20" style="background: rgba(253,47,85,0.08);">
					{{item.noteType==1?'单词':'词根'}}
				</view>
				<view class="size36 bold600 ml20 flex-a-i">
					{{item.entry}} <image src="/static/jianr.png" mode="widthFix" class="image flex width32"></image>
				</view>
			</view>
			<view class="bgFFF2F4   pg30 ra20 mt20">
				<view class="size28    " :class="{fith:item.isshow}"
					style="border-left:5rpx solid #FFF2F4;line-height: 23px;">
					{{item.note}}
				</view>
				<view v-if="item.isshow" class="flex-ju-c mt10">
					<view @click="kaizhan(item)" class="color666 wh92-40 ra40 flex-ju-c border979797 size22">展开</view>
				</view>
				<view v-if="item.shou" class="flex-ju-c mt10">
					<view @click="kaizhans(item)" class="color666 wh92-40 ra40 flex-ju-c border979797 size22">收起</view>
				</view>
				<view class="flex-a-i flex-wrap">
					<view v-for="(items,da) in item.images" :key="da" class="posire width190 mr20 mt20">
						<image @click="previewimg(item.images,da)" :src="items" class="image wh190-190 ra20"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isdata: false,
				list: [],
				page:1
			}
		},
		onReachBottom() {
			this.page++
			this.getlist()
		},
		onShow() {
			this.list = []
			this.page = 1
			this.getlist()
		},
		onLoad() {
			
		},
		methods: {
			getlist(){
				this.http('/api/note?pageNo='+this.page,{
					pageNo:this.page,
					pageSize:200,
				}).then(res => {
					res.data.map(item => {
						var alllem=0;
						var zilem =0;
						 alllem =this.countLetters(item.note)/2
						const chineseChars = item.note.match(/[\u4e00-\u9fa5]/g);
						if(chineseChars){
							 zilem = chineseChars.length
						}
						if (alllem + zilem > 121) {
							item.isshow = true
						} else {
							item.isshow = false
						}
					})
				
					this.list = [...this.list,...res.data]
					this.nodata(this.list,this)
				})
			},
			countLetters(str) {
			  const letterMatches = str.match(/[a-zA-Z]/g);
			  return letterMatches ? letterMatches.length : 0;
			},
			kaizhans(item){
				item.isshow = true
				item.shou = false
			},
			kaizhan(item) {
				item.isshow = false
				item.shou = true
			},
			tapdetail(item) {
				if (item.noteType == 1) {
					uni.navigateTo({
						url: "/pages/index/words_detail?id=" + item.entryId
					})
				} else {
					uni.navigateTo({
						url: "/pages/index/root_detail?id=" + item.entryId
					})
				}
			},
		}
	}
</script>

<style>
	.fith {
		-webkit-line-clamp: 5;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-align: start;
		-webkit-box-orient: vertical;
	}
</style>